<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>
<body style="overflow:hidden;">
<div class="layui-card" style="margin:3px;">
    <div class="layui-card-header" style="padding:5px 5px 0;line-height:38px;">
        <div class="layui-row">
            <form id="sysUserForm" class="layui-form layui-form-pane">
                <div class="layui-form-item" style="margin-bottom:0;">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline" style="width:80px;">
                            <select class="" id="active" name="active">
                                <option value="">所有</option>
                                <option value="1">开启</option>
                                <option value="2">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户等级</label>
                        <div class="layui-input-inline" style="width:120px;">
                            <select class="" id="grade" name="grade">
                                <option value="">所有</option>
                                <option value="1" th:if="${#authentication.principal.grade==1}">超级管理员</option>
                                <option value="2" th:if="${#authentication.principal.grade==1 || #authentication.principal.grade==2}">省级管理员</option>
                                <option value="3" th:if="${#authentication.principal.grade==1 || #authentication.principal.grade==2 || #authentication.principal.grade==3}">市级管理员</option>
                                <option value="4" th:if="${#authentication.principal.grade==1 || #authentication.principal.grade==2 || #authentication.principal.grade==3 || #authentication.principal.grade==4}">区级管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">模糊搜索</label>
                        <div class="layui-input-inline" style="width:190px;">
                            <input type="text" class="layui-input" id="baseString" name="baseString" placeholder="请输入账号、姓名、手机号" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align:center;">创建时间</label>
                        <div class="layui-input-inline" style="width:150px;">
                            <input type="text" class="layui-input" id="baseCreateTimeStart" name="baseCreateTimeStart" placeholder="请选择开始时间" autocomplete="off">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width:150px;">
                            <input type="text" class="layui-input" id="baseCreateTimeEnd" name="baseCreateTimeEnd" placeholder="请选择结束时间" autocomplete="off">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card-body" style="padding:0 5px 5px">
        <table class="layui-hide" id="sysUserTable" lay-filter="sysUserTable"></table>
    </div>
</div>

<!--头工具栏 -->
<script type="text/html" id="toolbar_head">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="search">
            <i class="fa fa-search"></i> 查询
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="refresh">
            <i class="fa fa-refresh"></i> 刷新
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="insert">
            <i class="layui-icon layui-icon-add-circle"></i> 添加
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="batchDelete">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
    </div>
</script>
<!--行工具栏 -->
<script type="text/html" id="toolbar_row">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="authorization">授权</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="delete">删除</a>
</script>
<!--模板 -->
<script type="text/html" id="gradeTpl">
    {{# if(d.grade === 1){ }}
    <span style="color:#FF5722">超级管理员</span>
    {{# } else if(d.grade === 2){ }}
    <span style="color:#01AAED">省级管理员</span>
    {{# } else if(d.grade === 3){ }}
    <span style="color:#01AAED">市级管理员</span>
    {{# } else if(d.grade === 4){ }}
    <span style="color:#01AAED">区级管理员</span>
    {{# } else { }}
    <span style="color:#01AAED">管理员等级解析失败</span>
    {{# } }}
</script>
<script type="text/html" id="activeTpl">
    <input type="checkbox" name="active" value="{{d.id+','+d.grade}}" lay-skin="switch" lay-text="开启|禁用" lay-filter="active" {{ d.active === 1 ? 'checked' : '' }} >
</script>

<script th:replace="/sys/base :: scriptFragment"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery', 'layer', 'laydate', 'table', 'form'], function () {
        var $ = layui.jquery;

        // TODO 日期选择文本框
        var laydate = layui.laydate;
        laydate.render({elem: '#baseCreateTimeStart', type: 'datetime', min: '2019-01-01 00:00:00', max: '2999-12-31 23:59:59'});
        laydate.render({elem: '#baseCreateTimeEnd', type: 'datetime', min: '2019-01-01 00:00:00', max: '2999-12-31 23:59:59'});

        // TODO 表格对象
        var table = layui.table;
        table.render({
            elem: "#sysUserTable"
            , id: "sysUserTable"
            , title: "用户"
            , height: top.window.layuiTabContentHeight - $(".layui-card-header").outerHeight() - 12
            , toolbar: "#toolbar_head" // 表头工具栏
            , defaultToolbar: [] // 清空默认表头工具栏
            , page: true // 开启分页
            , limit: 50
            , url: $.getProjectNameLI() + "/sys/admin/page"
            , method: "post"
            , where: {
                author: "lixing"
                , baseAdminAccount: [[${#authentication.principal.username}]]
                , baseAdminGrade: [[${#authentication.principal.grade}]]
            }
            , request: {pageName: "basePageNum", limitName: "basePageSize"} // 对分页请求的参数：page、limit重新设定名称
            , parseData: function (res) { // 将服务器返回的数据解析成table组件所规定的数据
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.records
                };
            }
            , cols: [[ //表头
                {type: 'checkbox'}
                , {title: '序号', width: 80, type: 'numbers'}
                , {title: '姓名', field: 'userName', sort: true}
                , {title: '账号', field: 'account', sort: true}
                , {title: '手机号码', width: 120, field: 'phone', sort: true}
                , {title: '邮箱', width: 180, field: 'email', sort: true}
                , {title: '创建时间', width: 180, field: 'createTime', sort: true}
                , {title: '等级', width: 100, field: 'grade', templet: '#gradeTpl'}
                , {title: '状态', width: 100, field: 'active', templet: '#activeTpl'}
                , {title: '操作', width: 200, align: 'center', toolbar: '#toolbar_row'}
            ]]
        });

        /**
         * 监听表头工具栏事件
         */
        table.on('toolbar(sysUserTable)', function (obj) {
            var form = $("form[id='sysUserForm']");
            var checkStatus = table.checkStatus(obj.config.id);
            var event = obj.event;
            if (event === 'search') { // TODO 查询
                table.reload('sysUserTable', {
                    page: {curr: 1}
                    , where: form.serializeObject()
                });
            } else if (event === 'refresh') { // TODO 刷新
                form.find('input[type=text],select').each(function () {
                    $(this).val('');
                });
                table.reload('sysUserTable', {
                    page: {curr: 1}
                    , where: form.serializeObject()
                });
            } else if (event === 'insert') {
                openSysModifyDialog('添加管理员','/sys/admin/toModify/null','540,570'); // TODO 添加
            } else if (event === 'batchDelete') {
                var row = checkStatus.data;
                if (row.length === 0) {
                    layer.msg("请先选择需要删除的数据", {time: 1500});
                } else {
                    var ids = [];
                    row.forEach(function (item) {
                        ids.push(item.id);
                    });
                    sysDelete("/sys/admin/delete",{id: ids.join(",")}); // TODO 批量删除
                }
            }
        });

        /**
         * 监听每行工具栏事件
         */
        table.on('tool(sysUserTable)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (event==="authorization") {
                if (data.grade!==1) {
                    openSysModifyDialog('管理员授权','/sys/admin/toAuthorization/'+data.id,'680,600'); // TODO 打开授权弹框
                } else {
                    layer.msg("超级管理员无需授权", {time: 1500,offset:'80px'});
                }
            } else if (event === 'update') {
                openSysModifyDialog('编辑关机','/sys/admin/toModify/'+data.id,'540,570'); // TODO 打开编辑弹框
            } else if (event === 'delete') {
                sysDelete("/sys/admin/delete",{id: data.id}); // TODO 删除
            }
        });

        /**
         * 监听用户状态变更
         */
        // TODO 表单对象
        var form = layui.form;
        form.on('switch(active)', function(obj){
            var array = this.value.split(",");
            var grade = array[1];
            if (grade === "1") {
                layer.msg("超级管理员无法修改状态", {time: 1500,offset:'80px'},function () {
                    window.location.reload();
                });
            } else {
                var id = array[0];
                sysUpdate('/sys/admin/saveModify/update',{id:id,active:obj.elem.checked?1:2});
            }
        });

    });
</script>
</body>
</html>